<template>
  <el-col class="tab-con" :span="24">
    <el-tabs :value="activeName" @tab-click="handleClick">
      <el-tab-pane label="筛选器" name="first">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="筛选器名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="筛选器别名" prop="name">
            <el-input v-model="ruleForm.name2"></el-input>
          </el-form-item>

          <el-form-item label="条件" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
        </el-form>
        <el-row class="tit">
          <el-col>共<span>3</span>端口</el-col>
        </el-row>
        <el-table style="width: 100%; margin-top: 10px" :data="tableData">
          <el-table-column prop="xuhao" width="30"></el-table-column>
          <el-table-column prop="duankou" min-width="100">
            <template class="header-self" slot="header"
              >端口<i class="daochu"></i
            ></template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      ruleForm: {
        isDailli: false,
        type: "",
        caozuo: "",
        lujing: "",
        canshu: "",
        beizhu: "",
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择脚本类型", trigger: "blur" }],
        desc: [{ required: true, message: "不允许为空", trigger: "blur" }],
      },
      tableData: [
        {
          xuhao: 1,
          duankou: "SID",
        },
        {
          xuhao: 2,
          duankou: "Sname",
        },
        {
          xuhao: 3,
          duankou: "CLASS",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
.tab-con {
  padding: 20px;
  .tit {
    font-size: 14px;
    span {
      margin: 0 10px;
      color: #2d8dfc;
    }
  }
  ::v-deep .el-table {
    .daochu {
      margin-left: 8px;
      vertical-align: middle;
      display: inline-block;
      width: 18px;
      height: 18px;
      background-image: url(~@/assets/导出.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
  }
}
</style>
